<template>
    <div class="statistics">
      <div id="PieChart"></div>
      <div id="Histogram"></div>
    </div>

</template>


<script>
  import moment from 'moment'
  import echarts from 'echarts'
    export default {
        name: "statistics",
        data() {
            return {
            }
        },
        methods: {
          showPieChart(data){
            var myChart = echarts.init(document.getElementById('PieChart'));
            const option ={
              title : {
                text: '联系人情况统计',
                  subtext: '截止'+moment().format("YYYY-MM-DD HH:mm:ss") ,
                  x:'center'
              },
              color:['#a1b5c1','#7675C1','#ABC190','#B897C1'],
              tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
              },
              legend: {
                x : 'center',
                y : 'bottom',
                data:['家人','朋友','同学','同事']
              },
              toolbox: {
                show : true,
                feature : {
                  mark : {show: true},
                  dataView : {show: true, readOnly: false},
                  magicType : {
                    show: true,
                    type: ['pie', 'funnel']
                  },
                  restore : {show: true},
                  saveAsImage : {show: true}
                }
              },
              calculable : true,
              series : [
                {
                  name:'半径模式',
                  type:'pie',
                  radius : [20, 110],
                  center : ['25%', '50%'],
                  roseType : 'radius',
                  label: {
                    normal: {
                      show: false
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  lableLine: {
                    normal: {
                      show: false
                    },
                    emphasis: {
                      show: true
                    }
                  },
                  data:data
                },
                {
                  name:'面积模式',
                  type:'pie',
                  radius : [30, 110],
                  center : ['75%', '50%'],
                  roseType : 'area',
                  data:data
                }
              ]
            }
            // 绘制图表
            myChart.setOption(option)
          },
          showHistogram(data){
            var myChart = echarts.init(document.getElementById('Histogram'));
            var xAxisData = data.map(item=>item.name);

            // let data1=[];
            // for (var i = 0; i < 100; i++) {
            //   xAxisData.push('类目' + i);
            //   data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
            // }
            const option = {
              title: {
                text: '柱状图动画延迟测试',
                align: 'center'
              },
              color:['#BBD6F4'],
              legend: {
                data: ['数量'],
                align: 'left'
              },
              toolbox: {
                // y: 'bottom',
                feature: {
                  magicType: {
                    type: ['stack', 'tiled']
                  },
                  dataView: {},
                  saveAsImage: {
                    pixelRatio: 2
                  }
                }
              },
              tooltip: {},
              xAxis: {
                data: xAxisData,
                silent: false,
                splitLine: {
                  show: false
                }
              },
              yAxis: {
              },
              series: [{
                name: '数量',
                type: 'bar',
                data:data,
                // data: data.map(item=>item.value),
                // data: data1,
                animationDelay: function (idx) {
                  return idx * 10;
                }
              }],
              animationEasing: 'elasticOut',
              animationDelayUpdate: function (idx) {
                return idx * 5;
              }
            };

            // 绘制图表
            myChart.setOption(option)
          }
        },
        computed: {},
        components: {},
        mounted() {
          let id=JSON.parse(window.localStorage.getItem('logInfo')).id;
          this.$http.toGet('/mail/pieChart/'+id)
            .then(resp=>{
              if(resp.resultCode===0){
                this.showPieChart(resp.data);
                this.showHistogram(resp.data);
              }
            });

        }
    }
</script>

<style lang="less" scoped>
  .statistics{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    margin-top: 60px;
    display: flex;
    div{
      flex: 1;
      margin-right: 80px;
    }
    #PieChart,#Histogram{
      height: 400px;
    }

  }
</style>
